<template>
  <div :class="$style['select-order-list']">
    <el-input :value="value" placeholder="请输入平台订单号" :disabled="disabled" @input="hanldeInput" @change="handleChange">
      <template slot="suffix">
        <div :class="$style['inline-wrap']">
          <i class="el-icon-search" @click.stop="handleClick"></i>
          <el-dialog :visible.sync="visible" width="80vw" :close-on-click-modal="false" append-to-body title="电商订单信息" @open="handleOpen" @closed="hsndleClosed">
            <table-box ref="tableBox" show-selection no-request :table-config="tableConfig" :data="tableData" @selection-change="handleSelectionChange">
            </table-box>
            <div :class="$style['btn-wrap']">
              <Button @click="handleCancel">取消</Button>
              <Button type="primary" @click="hanleConfirm">确定</Button>
            </div>
          </el-dialog>
        </div>
      </template>
    </el-input>
  </div>
</template>
<script>
import { productInfoByPCode } from '@/api/workOrder'
import { ccDict, getDictList } from '@/api/dataDict'
import { deepCopy } from '@/utils'
export default {
  name: 'SelectOrderList',
  model: {
    prop: 'orderCode',
    event: 'input'
  },
  props: {
    orderCode: {
      type: String,
      default: ''
    },
    buyChannel: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visible: false,
      value: '',
      tableData: [],
      selection: [],
      modeList: [],
      serviceModeList: [],
      tableConfig: {
        interfacePath: '',
        setting: [
          {
            label: '电商订单号',
            prop: 'code',
            minWidth: 110
          },
          {
            label: '平台状态',
            prop: 'platformBillStatus',
            propEnum: {
              dictTypeCode: 'PLATFORMBILLSTATUS',
              domainCode: 'marketing',
              appCode: 'call-center'
            }
          },
          {
            label: '订单状态',
            prop: 'billStatus',
            propEnum: {
              dictTypeCode: 'MSC_ORDER_STATUS',
              domainCode: 'marketing',
              appCode: 'call-center'
            }
          },
          {
            label: '物流方式',
            prop: 'logisticsMode',
            minWidth: 100,
            formatData: this.getDataName('modeList', 'logisticsMode')
          },
          {
            label: '订单流',
            prop: 'isReturn',
            formatData: v => {
              return v.isReturn ? '逆向订单' : '正向订单'
            }
          },
          {
            label: '配送方式',
            prop: 'serviceMode',
            formatData: this.getDataName('serviceModeList', 'serviceMode')
          },
          {
            label: '预约送货时间',
            prop: 'deliveryTime',
            minWidth: 145
          },
          {
            label: '办事处',
            prop: 'officeName'
          },
          {
            label: '服务商',
            prop: 'serviceName'
          }
        ]
      }
    }
  },
  computed: {
  },
  watch: {
    orderCode: {
      handler(v) {
        if (/[^\w]/.test(v)) {
          this.hanldeInput(v)
        } else {
          this.value = v
        }
      },
      immediate: true
    }
  },
  created() {
    this.getDataDict()
  },
  methods: {
    getDataDict() {
      ccDict('LOGISTICSMODE').then(res => {
        this.modeList.push(...(res.data || []))
      })
      getDictList({ dictTypeCode: 'LOGISTICS_MODE', appCode: 'eco', domainCode: 'marketing' }).then(res => {
        this.modeList.push(...(res.data || []))
      })
      ccDict('SERVICEMODE').then(res => {
        this.serviceModeList.push(...(res.data || []))
      })
      getDictList({ dictTypeCode: 'SERVICE_MODE', appCode: 'eco', domainCode: 'marketing' }).then(res => {
        this.serviceModeList.push(...(res.data || []))
      })
    },
    getDataName(listKey, key) {
      return (row) => {
        const t = this[listKey].find(e => e.dictCode === row[key])
        return t ? t.dictName : ''
      }
    },
    hanldeInput(v) {
      this.value = (v || '').replace(/[^\w\-]/g, '')
      this.$emit('input', this.value)
    },
    handleChange(v) {
      this.$emit('change', v)
    },
    handleClick() {
      if (!this.orderCode && this.orderCode !== 0) {
        this.$message.warning(`平台订单号为空`)
        return
      }
      this.visible = true
    },
    getTableData() {
      productInfoByPCode(this.orderCode).then(res => {
        this.tableData = (res.data || []).filter(e => ['01', '0'].includes(e.orderType))
      })
    },
    handleOpen() {
      this.getTableData()
    },
    hsndleClosed() {
      this.tableData = []
    },
    handleCancel() {
      this.visible = false
    },
    handleSelectionChange(v) {
      this.selection = v
    },
    validate() {
      if (this.selection.length === 0) {
        this.$message.warning('请选择订单!')
        return false
      }
      const serviceCode = this.selection[0].serviceCode
      const t = this.selection.every(e => e.serviceCode === serviceCode)
      if (!t) {
        this.$message.warning('只能选择同一服务商的多个电商订单号!')
      }
      return t
    },
    hanleConfirm() {
      if (this.validate()) {
        this.$emit('on-confirm', this.selection.map(e => e.code), this.orderCode, deepCopy(this.selection))
        this.visible = false
      }
    }
  }
}
</script>
<style lang="scss" module>
.select-order-list{
  .inline-wrap{
    display: inline-block;
  }
}
    .btn-wrap{
      padding-top: 20px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
</style>
